<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="icon.jpg">
    <title>Monitor</title>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/navbar-fixed-top.css" rel="stylesheet">
    <link href="css/numerical.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/Chart.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/ie-emulation-modes-warning.js"></script>
    <script src="js/utils.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="icon.jpg" alt="Brand" style="height:24px;width:24px"/></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul id="menu" class="nav navbar-nav">
                <li class="active"><a>图形大屏</a></li>
                <li><a>核心数据</a></li>
                <li><a>数字大屏</a></li>
                <li><a href="#">配置</a><li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li id=numbers class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">热线号<span class="caret"></span></a>
                    <ul id="line_number" class="dropdown-menu">
                        <li><a href="#">110</a></li>
                        <li><a href="#">120</a></li>
                        <li><a href="#">911</a></li>
                        
                        <!--
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Second Class</li>
                        <li><a href="#">class 1</a></li>
                        <li><a href="#">class 2</a></li>
                        -->
                    </ul>
                </li>
                <!--
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">技能组<span class="caret"></span></a>
                    <ul id="groups" class="dropdown-menu">
                        <li><a href="#">技能一</a></li>
                        <li><a href="#">技能二</a></li>
                        <li><a href="#">技能三</a></li>
                        <li role="separator" class="divider"></li>
                        
                        <li class="dropdown-header">Second Class</li>
                        <li><a href="#">class 1</a></li>
                        <li><a href="#">class 2</a></li>
                        
                    </ul>
                </li>
                -->
            </ul>
        </div><!--/.nav-collapse -->
    </div>
    </nav>
    <div class="container">
        <!--<div class="jumbotron">-->
            <div>
            <div id="title">
                <div class="page-header">
                    <h1>移动监控系统<small>ver 1.0</small></h1>
                </div>
                <div class="well">
                    <div class="clearfix">
                        <h3 class="monitor-hint-left">选中热线号: <span id="current_select_no" class="label label-info">New</span></h3>
                    </div>
                </div>
            </div>
            <div id="content">
                <div id="graphic_data">
                    <div>
                        <canvas id="bar" width="400" height="400"></canvas>
                    </div>
                    <div>
                        <canvas id="line" width="400" height="400"></canvas>
                    </div>
                </div>

                <div id="key_data">
                    <div>
                        <ul id="live_data" class="list-group">
                            <li class="list-group-item">当前呼入数<span class="badge" data-id="ContactInbound">0</span></li>
                            <li class="list-group-item">当前排队数<span class="badge" data-id="ContactInQueue">0</span></li>
                            <li class="list-group-item">呼入通话数<span class="badge" data-id="InboundConnect">0</span></li>
                            <li class="list-group-item">呼出通话数<span class="badge" data-id="OutboundConnect">0</span></li>
                        </ul>
                    </div>
                    <div>
                        <ul id="report_data" class="list-group">
                            <li class="list-group-item">呼入量<span class="badge" data-id="inboundNum">0</span></li>
                            <li class="list-group-item">转人工量<span class="badge" data-id="acdCallsNum">0</span></li>
                            <li class="list-group-item">人工接通量<span class="badge" data-id="ansAcdCallNum">0</span></li>
                            <li class="list-group-item">呼出量<span class="badge" data-id="outboundNum">0</span></li>
                            <li class="list-group-item">排队放弃量<span class="badge" data-id="abnAcdCallNum">0</span></li>
                            <li class="list-group-item">派对接通率<span class="badge" data-unit="%" data-id="acdAnsRate">0</span></li>
                            <li class="list-group-item">服务水平<span class="badge" data-unit="%" data-id="serviceLevel_20">0</span></li>
                        </ul>
                    </div>
                </div>

                <div id="all_data" >
                    <div id="accordion" role="tablist" aria-multiselectable="true">

                        <div class="panel panel-default">

                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" 
                                    data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    实时监控
                                    </a>
                                </h4>
                            </div>

                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body row">

                                        <div data-id="ContactInbound" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">当前呼入数</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>
                                        <div  data-id="ContactInQueue" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">当前排队数</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>
                                        <div  data-id="InboundConnect" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">呼入通话数</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="OutboundConnect" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">呼出通话数</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="AgentTotal" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">签入人数</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="AgentNotReady" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">置忙人数</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="AgentReady" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">空闲人数</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="AgentAfterCallWork" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">整理人数</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="AgentOtherWork" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">休息人数</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div  data-id="AgentTalking" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">通话人数</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="AgentOtherstatus" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">其他人数</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                </div>
                            </div>
                        </div>


                        <div class="panel panel-default">

                            <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        统计数据
                                    </a>
                                </h4>
                            </div>

                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body row">


                                        <div data-id="inboundNum" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">呼入量</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="acdCallsNum" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">转人工量</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div id="ansAcdCallNum" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">人工接通量</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="abnAcdCallNum" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">排队放弃量</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="%" data-id="acdAnsRate" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">排队接通率</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="%" data-id="serviceLevel_20" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">服务水平</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="outboundNum" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">呼出量</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="s" data-id="avgInqueueTimeLen" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">平均排队时长</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="s" data-id="maxInqTimeLen" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">最大排队时长</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="s" data-id="avgTalkingTimeLen" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">平均通话时长</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="s" data-id="avgRingTimeLen" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">平均振铃时长</h6>
                                                <div class="post-featured-image" >
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="abnRingNum" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">振铃放弃量</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-id="ivrAbnTotal" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">IVR放弃量</h6>
                                                <div class="post-featured-image" data-id="ivrAbnTotal">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="%" data-id="abnRate" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">放弃率</h6>
                                                <div class="post-featured-image" data-unit="%" data-id="abnRate">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                        <div data-unit="%" data-id="acdRate" class="col-xs-6 col-sm-3 col-md-2">
                                            <article class="post tag-ad">
                                                <h6 class="post-title">IVR转接率</h6>
                                                <div class="post-featured-image">
                                                    0
                                                </div>
                                            </article>
                                        </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

        
        <!-- Main component for a primary marketing message or call to action -->
        
    </div> <!-- /container -->
    <!-- canvas set up ================ --> 
    <script>
        var backgroundColors = [randomColor(),randomColor(),randomColor(),randomColor(),randomColor(),randomColor(),randomColor()];
        // default setting
        var menu = $("ul#menu li");
        var graphicData = $("#graphic_data");
        var keyData = $("#key_data");
        var allData = $("#all_data");

        // 获取可定制热线号 接口
        var httpLine = "serviceno.json";
            // 大屏实时数据接口
        var http1 = "livedata.json";
            // 大屏报表接口
        var http2 = "report.json";
            // 大屏时段接口
        var http3 = "timers.json";
        // 获取 订阅的显示数据
        var dataIndexFilterUrl = "http://127.0.0.1:9001/customization/dataIndex?userId="

        graphicData.hide();
        keyData.hide();
        allData.hide();
        $().ready(function(){
            graphicData.show();
            menu.click(function(e) {
                menu.attr("class","");
                $(this).attr("class","active");
                var index = menu.index(this);
                if(index == 0) {
                    graphicData.show();
                    keyData.hide();
                    allData.hide();
                }else if(index == 1) {
                    graphicData.hide();
                    keyData.show();
                    allData.hide();
                }else if(index == 2) {
                    graphicData.hide();
                    keyData.hide();
                    allData.show();
                }
                if ($(".navbar-collapse").hasClass('in')){
                    $("#navbar").collapse('toggle');
                }
            });
            // 得到热线号
            var userId = readCookie("userId");
            initData(httpLine+"?userId="+userId,http1,http2,http3,dataIndexFilterUrl+"?userId="+userId);
        });
    </script> 
</body>
</html>
